Конвеєр валідації React useFormState: опанування багатоетапної валідації форм

Створення складних форм із надійною валідацією є поширеною проблемою в сучасній веб-розробці. Хук useFormState в React пропонує потужний та гнучкий спосіб керування станом форми та валідацією, дозволяючи створювати складні багатоетапні конвеєри валідації. Цей вичерпний посібник проведе вас через увесь процес, від розуміння основ до реалізації просунутих асинхронних стратегій валідації.

Чому багатоетапна валідація форм?

Традиційна, одноетапна валідація форм може стати громіздкою та неефективною, особливо при роботі з формами, що містять численні поля або складні залежності. Багатоетапна валідація дозволяє вам:

• Покращити користувацький досвід: Надавайте негайний зворотний зв'язок щодо конкретних розділів форми, ефективніше направляючи користувачів у процесі заповнення.
• Підвищити продуктивність: Уникайте непотрібних перевірок валідації для всієї форми, оптимізуючи продуктивність, особливо для великих форм.
• Збільшити зручність супроводу коду: Розбивайте логіку валідації на менші, керовані одиниці, що робить код легшим для розуміння, тестування та підтримки.

Розуміння useFormState

Хук useFormState (часто доступний у бібліотеках, таких як react-use, або в кастомних реалізаціях) надає спосіб керування станом форми, помилками валідації та обробкою відправки. Його основний функціонал включає:

• Керування станом: Зберігає поточні значення полів форми.
• Валідація: Виконує правила валідації для значень форми.
• Відстеження помилок: Відстежує помилки валідації, пов'язані з кожним полем.
• Обробка відправки: Надає механізми для відправки форми та обробки результату.

Створення базового конвеєра валідації

Почнемо з простого прикладу двохетапної форми: особиста інформація (ім'я, email) та інформація про адресу (вулиця, місто, країна).

Крок 1: Визначення стану форми

Спочатку ми визначаємо початковий стан нашої форми, що охоплює всі поля:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

Крок 2: Створення правил валідації

Далі ми визначаємо наші правила валідації. Для цього прикладу вимагатимемо, щоб усі поля були не порожніми, і переконаємось, що email має правильний формат.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Це поле є обов\'язковим.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Неправильний формат email.';
  }

  return null; // Помилки немає
};

Крок 3: Реалізація хука useFormState

Тепер інтегруємо правила валідації в наш React-компонент, використовуючи (гіпотетичний) хук useFormState:

import React, { useState } from 'react';

// Припускаючи кастомну реалізацію або бібліотеку, як react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Валідація при зміні для кращого UX (опціонально)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); // Об'єднати з існуючими помилками
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Відправити форму
      console.log('Форму відправлено:', values);
      alert('Форму відправлено!'); // Замініть на реальну логіку відправки
    } else {
      console.log('Форма містить помилки, будь ласка, виправте їх.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Особиста інформація
          
            Ім'я:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Прізвище:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            Email:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Адреса
          
            Вулиця:
            
            {errors.street && {errors.street}}
          
          

          
            Місто:
            
            {errors.city && {errors.city}}
          
          

          
            Країна:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Назад}
        {currentStage < 2 && Далі}
        {currentStage === 2 && Відправити}
      
    
  );
};

export default MyForm;

Крок 4: Реалізація навігації по етапах

Використовуйте змінні стану для керування поточним етапом форми та відображення відповідного розділу форми на основі поточного етапу.

Просунуті техніки валідації

Асинхронна валідація

Іноді валідація вимагає взаємодії з сервером, наприклад, для перевірки доступності імені користувача. Це вимагає асинхронної валідації. Ось як її інтегрувати:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Ім'я користувача доступне
    } else {
      return 'Ім\'я користувача вже зайняте.';
    }
  } catch (error) {
    console.error('Помилка перевірки імені користувача:', error);
    return 'Помилка перевірки імені користувача. Будь ласка, спробуйте ще раз.'; // Коректно обробляйте мережеві помилки
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Відправити форму
        console.log('Форму відправлено:', values);
        alert('Форму відправлено!'); // Замініть на реальну логіку відправки
      } else {
        console.log('Форма містить помилки, будь ласка, виправте їх.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting // Опціонально: показувати повідомлення про завантаження під час валідації
  };
};

Цей приклад включає функцію validateUsername, яка робить API-запит для перевірки доступності імені користувача. Переконайтеся, що ви обробляєте потенційні мережеві помилки та надаєте відповідний зворотний зв'язок користувачеві.

Умовна валідація

Деякі поля можуть вимагати валідації лише на основі значень інших полів. Наприклад, поле "Веб-сайт компанії" може бути обов'язковим лише якщо користувач вказав, що він працевлаштований. Реалізуйте умовну валідацію у ваших функціях валідації:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Веб-сайт компанії є обов\'язковим, якщо ви працевлаштовані.';
  }
  return validateField(fieldName, value); // Делегувати базовій валідації
};

Динамічні правила валідації

Іноді самі правила валідації повинні бути динамічними, залежно від зовнішніх факторів або даних. Цього можна досягти, передаючи динамічні правила валідації як аргументи до ваших функцій валідації:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Це поле повинно містити менше ${rules[fieldName].maxLength} символів.`;
  }
  return validateField(fieldName, value); // Делегувати базовій валідації
};

Обробка помилок та користувацький досвід

Ефективна обробка помилок є ключовою для позитивного користувацького досвіду. Враховуйте наступне:

• Чітко відображайте помилки: Розміщуйте повідомлення про помилки біля відповідних полів вводу. Використовуйте чітку та лаконічну мову.
• Валідація в реальному часі: Валідуйте поля під час введення тексту користувачем, надаючи негайний зворотний зв'язок. Пам'ятайте про наслідки для продуктивності; за потреби використовуйте debounce або throttle для викликів валідації.
• Фокус на помилках: Після відправки форми сфокусуйте увагу користувача на першому полі з помилкою.
• Доступність: Переконайтеся, що повідомлення про помилки доступні для користувачів з обмеженими можливостями, використовуючи атрибути ARIA та семантичний HTML.
• Інтернаціоналізація (i18n): Впроваджуйте належну інтернаціоналізацію для відображення повідомлень про помилки мовою, яку обрав користувач. У цьому можуть допомогти сервіси, такі як i18next, або нативний JavaScript Intl API.

Найкращі практики для багатоетапної валідації форм

• Зберігайте правила валідації лаконічними: Розбивайте складну логіку валідації на менші функції, що можна використовувати повторно.
• Ретельно тестуйте: Пишіть юніт-тести, щоб забезпечити точність та надійність ваших правил валідації.
• Використовуйте бібліотеку для валідації: Розгляньте можливість використання спеціалізованої бібліотеки для валідації (наприклад, Yup, Zod), щоб спростити процес та покращити якість коду. Ці бібліотеки часто надають валідацію на основі схем, що полегшує визначення та керування складними правилами валідації.
• Оптимізуйте продуктивність: Уникайте непотрібних перевірок валідації, особливо під час валідації в реальному часі. Використовуйте техніки мемоізації для кешування результатів валідації.
• Надавайте чіткі інструкції: Направляйте користувачів у процесі заповнення форми за допомогою чітких інструкцій та корисних підказок.
• Розгляньте прогресивне розкриття: Показуйте лише відповідні поля для кожного етапу, спрощуючи форму та зменшуючи когнітивне навантаження.

Альтернативні бібліотеки та підходи

Хоча цей посібник зосереджений на кастомному хуку useFormState, існує кілька чудових бібліотек для форм, які надають схожу функціональність, часто з додатковими можливостями та оптимізацією продуктивності. Деякі популярні альтернативи включають:

• Formik: Широко використовувана бібліотека для керування станом форм та валідацією в React. Вона пропонує декларативний підхід до обробки форм та підтримує різноманітні стратегії валідації.
• React Hook Form: Бібліотека, орієнтована на продуктивність, яка використовує неконтрольовані компоненти та React ref API для мінімізації повторних рендерів. Вона забезпечує відмінну продуктивність для великих та складних форм.
• Final Form: Універсальна бібліотека, що підтримує різноманітні UI-фреймворки та бібліотеки валідації. Вона пропонує гнучкий та розширюваний API для налаштування поведінки форм.

Вибір правильної бібліотеки залежить від ваших конкретних вимог та уподобань. Приймаючи рішення, враховуйте такі фактори, як продуктивність, простота використання та набір функцій.

Міжнародні аспекти

При створенні форм для глобальної аудиторії важливо враховувати інтернаціоналізацію та локалізацію. Ось деякі ключові аспекти:

• Формати дати та часу: Використовуйте формати дати та часу, специфічні для локалі, щоб забезпечити узгодженість та уникнути плутанини.
• Формати чисел: Використовуйте специфічні для локалі формати чисел, включаючи символи валют та десяткові роздільники.
• Формати адрес: Адаптуйте поля для адрес до форматів різних країн. Деякі країни можуть вимагати поштових індексів перед містами, тоді як інші можуть взагалі не мати поштових індексів.
• Валідація номерів телефонів: Використовуйте бібліотеку для валідації номерів телефонів, яка підтримує міжнародні формати.
• Кодування символів: Переконайтеся, що ваша форма коректно обробляє різні набори символів, включаючи Unicode та інші нелатинські символи.
• Макет справа наліво (RTL): Підтримуйте мови з напрямком письма справа наліво, такі як арабська та іврит, адаптуючи макет форми відповідно.

Враховуючи ці міжнародні аспекти, ви можете створювати форми, які є доступними та зручними для глобальної аудиторії.

Висновок

Реалізація конвеєра багатоетапної валідації форм за допомогою хука useFormState в React (або альтернативних бібліотек) може значно покращити користувацький досвід, підвищити продуктивність та збільшити зручність супроводу коду. Розуміючи основні концепції та застосовуючи найкращі практики, викладені в цьому посібнику, ви зможете створювати надійні та масштабовані форми, що відповідають вимогам сучасних веб-додатків.

Не забувайте надавати пріоритет користувацькому досвіду, ретельно тестувати та адаптувати ваші стратегії валідації до конкретних вимог вашого проєкту. Завдяки ретельному плануванню та виконанню ви можете створювати форми, які є одночасно функціональними та приємними у використанні.

Додаткові матеріали для вивчення

• Офіційна документація React
• Документація Formik
• Документація React Hook Form